// 售油信息填写
<template>
  <div class="oilSale-container">
    <van-nav-bar
      class="app-nav-bar"
      title="售油信息"
      left-arrow
      @click-left="$router.back()"
    />
    <van-tabs v-model="active">
      <van-tab title="此次售油">
        <van-radio-group v-model="radio" direction="horizontal" @change="carChange()">
          <van-radio name="1" shape="square" icon-size="18px">内部车辆</van-radio>
          <van-radio name="2" shape="square" icon-size="18px">外部车辆</van-radio>
        </van-radio-group>
        <van-form class="form-box" @submit="onSubmit">
          <van-field
            v-model="oilSaleForm.oil_inlet_price"
            type="number"
            name="进油单价"
            label="进油单价"
            placeholder="请填写进油单价"
            :rules="[{ required: true, message: '请填写进油单价' }]"
          />
          <van-field
            readonly
            clickable
            name="calendar"
            :value="oilSaleForm.oil_sale_date"
            label="售油日期"
            placeholder="点击选择售油日期"
            :rules="[{ required: true, message: '请填写售油日期' }]"
            @click="showCalendar = true"
          />
          <van-calendar :min-date="minDate" :max-date="maxDate" v-model="showCalendar" @confirm="onConfirm" />
          <van-field
            v-model="oilSaleForm.oil_sale_price"
            type="number"
            name="售油单价"
            label="售油单价"
            placeholder="请填写售油单价"
            :rules="[{ required: true, message: '请填写售油单价' }]"
          />
          <van-field
            v-if="insideCarShow"
            v-model="inside_car"
            type="text"
            readonly
            name="内部车辆"
            label="内部车辆"
            placeholder="请填写车牌号"
            @click="show = true"
          />
          <van-action-sheet cancel-text="取消" close-on-click-action v-model="show" :actions="actions" @select="onSelect" />
          <van-field
            v-if="!insideCarShow"
            v-model="outside_car"
            type="text"
            name="外部车辆"
            label="外部车辆"
            placeholder="请填写车牌号"
          />
          <van-field
            v-model="oilSaleForm.driver"
            type="text"
            name="司机名称"
            label="司机名称"
            placeholder="请填写司机名称"
            :rules="[{ required: true, message: '请填写司机名称' }]"
          />
          <van-field
            v-model="oilSaleForm.oiling_quantity"
            type="number"
            name="售油升数"
            label="售油升数"
            placeholder="请填写售油升数"
            :rules="[{ required: true, message: '请填写售油升数' }]"
          />
          <van-field
            v-model="autoProfit"
            readonly
            name="此次盈利"
            label="此次盈利"
            placeholder="填写完成自动计算"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </van-tab>
      <van-tab title="历史售油">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <el-table :data="list" border>
              <el-table-column prop="oil_sale_date" label="日期">
              </el-table-column>
              <el-table-column prop="car_number" label="车牌号" width="80px">
              </el-table-column>
              <el-table-column prop="oil_inlet_price" label="进价" width="65px"> </el-table-column>
              <el-table-column prop="oil_sale_price" label="售价" width="65px"> </el-table-column>
              <el-table-column prop="oiling_quantity" label="售量" width="80px"> </el-table-column>
              <el-table-column prop="profit" label="盈利"> </el-table-column>
              <el-table-column label="操作" width="100px">
                <template slot-scope="scope">
                  <el-button
                  type="primary" icon="el-icon-edit" circle
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"></el-button>
                  <el-button
                  round
                    size="mini"
                    type="danger" icon="el-icon-delete" circle
                    @click="handleDelete(scope.$index, scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// import { addLeave, getLeave } from '@/api/leave'
// import { Toast } from 'vant'
import { getOilInfo } from '@/api/oilInlet'
import { addOilSaleInfo, getOilSaleInfo, destroy } from '@/api/oilSale'
export default {
  name: 'oilSaleIndex',
  components: {},
  props: {},
  data () {
    return {
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2035, 0, 31),
      oilSaleForm: {
        oil_inlet_price: null, // 进油单价
        oil_sale_date: null, // 售油日期
        time_stamp: null, // 售油时间戳
        oil_inlet_id: null, // 进油批次
        oil_sale_price: null, // 售油单价
        driver: '', // 司机名
        car_number: null, // 车牌号
        oiling_quantity: null, // 售油升数
        profit: null // 此次售油盈利
      },
      inside_car: null, // 内部车车牌号
      actions: [{ name: '冀ADJ656' }, { name: '冀A9638W' }, { name: '冀A758AF' }, { name: '冀AL7806' }, { name: '冀AFV191' }, { name: '冀A644P2' }, { name: '冀A7Z939' }, { name: '冀A976WU' }, { name: '冀A483G3' }, { name: '冀AKN117' }, { name: '冀AU8537' }, { name: '冀ABD571' }, { name: '冀AKF385' }, { name: '冀A35Q54' }, { name: '冀A5285C' }, { name: '冀A8U871' }, { name: '冀A54U11' }, { name: '冀A589AM' }, { name: '冀A552AM' }, { name: '冀A247CF' }, { name: '冀A79D74' }, { name: '冀ABM247' }, { name: '冀AXJ901' }, { name: '冀A8189V' }, { name: '冀A477G3' }, { name: '冀A8535V' }, { name: '冀A8608Z' }, { name: '冀AKX857' }, { name: '冀ALB477' }], // 内部车车牌号列表
      outside_car: null, // 外部车车牌号
      active: 0, // 默认打开的标签页
      showCalendar: false, // 展示日历
      show: false, // 展示车牌号列表
      radio: '1', // 默认选择内部车辆
      insideCarShow: true, // 默认选择展示内部车辆
      list: [],
      loading: false,
      finished: false,
      refreshing: false
    }
  },
  computed: {
    autoProfit: { // 计算盈利
      set: function (v) {
        this.oilSaleForm.profit = v
      },
      get: function () {
        if (this.oilSaleForm.oil_sale_price === this.oilSaleForm.oil_inlet_price && this.oilSaleForm.oil_sale_price !== null) {
          return 0.00
        } else {
          return parseFloat((this.oilSaleForm.oil_sale_price - this.oilSaleForm.oil_inlet_price) * this.oilSaleForm.oiling_quantity).toFixed(2) === '0.00' ? null : parseFloat((this.oilSaleForm.oil_sale_price - this.oilSaleForm.oil_inlet_price) * this.oilSaleForm.oiling_quantity).toFixed(2)
        }
      }
    }
  },
  watch: {},
  created () {},
  mounted () {
    this.getInletInfo()
    this.getSaleInfo()
  },
  methods: {
    onSubmit () { // 提交表单
      // console.log('外部车辆', this.outside_car)
      this.oilSaleForm.car_number = this.inside_car === null ? this.outside_car : this.inside_car
      this.oilSaleForm.profit = this.autoProfit
      console.log('submit', this.oilSaleForm)
      this.$toast.loading({
        message: '提交中...', // 提示文本
        forbidClick: true, // 禁止背景点击
        duration: 0 // 展示时长ms 值为0时 toast不会消失
      })
      addOilSaleInfo(this.oilSaleForm).then(res => {
        console.log('提交售油信息', res)
        if (res.data.errno === 1000) {
          this.$toast.success('提交成功')
          // this.$router.push('/oilEnter')
          setTimeout(() => {
            window.location.reload()
          }, 1000)
        } else {
          this.$toast.fail('参数错误')
        }
      }).catch(err => {
        console.log('提交售油信息错误', err)
      })
    },
    onConfirm (date) { // 展示日历 年/月/日
      // console.log(date)
      this.oilSaleForm.oil_sale_date = `${date.getYear() + 1900}/${date.getMonth() + 1}/${date.getDate()}`
      this.oilSaleForm.time_stamp = new Date(date).getTime()
      this.showCalendar = false
    },
    onSelect (item) { // 内部车辆选择器
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.inside_car = item.name
      this.show = false
      // Toast(item.name)
    },
    carChange () { // 内外车辆选择
      this.inside_car = null // 不清空数据的话如果连续填入数据会出问题
      this.outside_car = null
      this.insideCarShow = !this.insideCarShow
    },
    getInletInfo () {
      getOilInfo()
        .then((res) => {
          // console.log('进油信息', res)
          this.oilSaleForm.oil_inlet_id = res.data.data[res.data.data.length - 1]._id
          this.oilSaleForm.oil_inlet_price = res.data.data[res.data.data.length - 1].oil_inlet_price
          // console.log('进油批次', this.oilSaleForm.oil_inlet_id)
          // console.log('进油单价', this.oilSaleForm.oil_inlet_price)
        })
        .catch((err) => {
          console.log('getOilInfo err', err)
        })
    },
    getSaleInfo () {
      getOilSaleInfo().then(res => {
        console.log('历史售油信息', res)
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }
        // console.log('进油信息', res)
        for (let i = 0; i < res.data.data.length; i++) {
          this.list.push(res.data.data[i])
        }
        this.finished = true
      }).catch(err => {
        console.log(err)
      })
    },
    onLoad () {
      this.getSaleInfo()
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
      this.$dialog.confirm({
        title: '警告',
        message: '确认要删除吗'
      })
        .then(() => {
          // on confirm
          destroy({
            id: row._id
          }).then(res => {
            console.log('res', res)
            this.$toast.success('删除成功')
            setTimeout(() => {
              window.location.reload()
            }, 1000)
            // this.$router.push('/oilEnter')
            // this.getSaleInfo()
          }).catch(err => {
            console.log('err', err)
            this.$toast.fail('删除失败')
            // this.$router.push('/oilEnter')
          })
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}

</script>

<style scoped lang="scss">
.form-box {
  padding: 0 10px;
}
.van-field {
  border-radius: 10px;
  margin: 16px 0;
}
.tab_field {
  padding: 0 10px;
}
.field-btn {
  border-radius: 10px;
  background-color: rgba(25, 137, 250, 0.7);
}
.van-radio-group--horizontal {
  margin: 20px 0;
  height: 22px;
  justify-content: space-around;
}
/deep/.van-radio__label {
  font-size: 20px;
}
</style>
